<!-- 基本属性 -->
<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item :label="$t('MAC地址')" prop="mac" class="basic-set" v-if="(editorForm.macs&&editorForm.macs!=='') || (editorForm.updateGroupId&&editorForm.updateGroupId!=='')">
                    <el-input v-model="editorForm.mac" :placeholder="$t('请输入MAC地址')" maxlength="12" :disabled="true" autocomplete="off" :show-word-limit="false" clearable></el-input>
                </el-form-item>
                <el-form-item :label="$t('MAC地址')" prop="mac" class="basic-set" v-else>
                    <el-input v-model="editorForm.mac" :placeholder="$t('请输入MAC地址')" maxlength="12" :disabled="(editorForm.auditState==1?true:false) && (!editorForm.mac?false:true)" autocomplete="off" :show-word-limit="false" clearable></el-input>
                </el-form-item>
                <el-form-item :label="$t('终端名称')" prop="name" class="basic-set" v-if="(editorForm.macs&&editorForm.macs!=='') || (editorForm.updateGroupId&&editorForm.updateGroupId!=='')">
                    <el-input v-model="editorForm.name" :placeholder="$t('请输入终端名称')" :disabled="true" autocomplete="off" maxlength="20" :show-word-limit="false" clearable></el-input>
                </el-form-item>
                <el-form-item :label="$t('终端名称')" prop="name" class="basic-set" v-else>
                    <el-input v-model="editorForm.name" :placeholder="$t('请输入终端名称')" autocomplete="off" maxlength="20" :show-word-limit="false" clearable></el-input>
                </el-form-item>
                <el-form-item :label="$t('安装省')" prop="provinceId" class="basic-set">
                    <el-select v-model="editorForm.provinceId" :placeholder="$t('请选择安装省')" @change="changeCity">
                        <el-option v-for="item in provinceArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('安装城市')" prop="cityId" class="basic-set">
                    <el-select v-model="editorForm.cityId" :placeholder="$t('请选择安装城市')">
                        <el-option v-for="item in cityArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('安装位置')" prop="location" class="basic-set">
                    <el-input v-model="editorForm.location" :placeholder="$t('请输入安装位置')" autocomplete="off" maxlength="20" :show-word-limit="false" clearable></el-input>
                </el-form-item>
                <el-form-item :label="$t('分组')" prop="groupId" class="basic-set">
                    <el-select-tree
                        :placeholder="$t('请选择终端分组')"
                        :props="props"
                        :data="treeData"
                        v-model="editorForm.groupId"
                        :clearable="clearable"
                        :disabled="false"
                        :disabled-values="disabledValues"
                        :default-expand-all="defaultExpandAll"
                        :check-strictly="checkStrictly"
                    ></el-select-tree>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item :label="$t('编号')" prop="no" class="basic-set" v-if="(editorForm.macs&&editorForm.macs!=='') || (editorForm.updateGroupId&&editorForm.updateGroupId!=='')">
                    <el-input v-model="editorForm.no" :placeholder="$t('请输入编号')" :disabled="true" autocomplete="off" maxlength="10" :show-word-limit="false" clearable></el-input>
                </el-form-item>
                <el-form-item :label="$t('编号')" prop="no" class="basic-set" v-else>
                    <el-input v-model="editorForm.no" :placeholder="$t('请输入编号')" autocomplete="off" maxlength="10" :show-word-limit="false" clearable></el-input>
                </el-form-item>
                <el-form-item :label="$t('时区')" prop="timeZone" class="basic-set">
                    <el-select v-model="editorForm.timeZone" :placeholder="$t('请选择时区')">
                        <el-option v-for="(item, index) in timeZones" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item :label="$t('到期日期')" prop="expiredDate" class="basic-set">
                    <el-date-picker v-model="editorForm.expiredDate" type="date" :placeholder="$t('请选择到期日期')" value-format="yyyy-MM-dd" :picker-options="expireTimeOption"></el-date-picker>
                </el-form-item> -->
                <el-form-item :label="$t('备注')" prop="comment" class="basic-set">
                    <el-input v-model="editorForm.comment" type="textarea" :placeholder="$t('请输入备注')" maxlength="150" resize="none" :autosize="{ minRows: 2, maxRows: 7 }" :show-word-limit="false" clearable></el-input>
                </el-form-item>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { weekArray, timeZoneArray } from "@/const/index"
import moment from 'moment'
import deviceApis from '@/api/device'
export default {
    name: "BasicSet",
    data() {
        return {
            tableData: [],
            isClearable: true,      // 可清空（可选）
            isAccordion: true,      // 可收起（可选）
            valueId: 0,            // 初始ID（可选）
            checkStrictly: true,
            clearable: true,
            defaultExpandAll: true,
            props: {                // 配置项（必选）
                value: 'id',
                label: "name",
                owner: 'owner',
                children: 'children',
                disabled: "kk",
            },
            treeData: [],
            treeTagData: [],
            provinceArray: [],
            cityArray: [],
            weeks: weekArray,
            timeZones: timeZoneArray,
            start: '',
            end: '',
            week: [ '7', '1', '2', '3', '4', '5', '6' ],
            weekIds: [],
            weekNames: [],
            expireTimeOption: {
                disabledDate(date) {
                    return date.getTime() <= moment(new Date()).subtract(2,'day');
                }
            },
            indexIds:[],
            // currentRow: null,
            // currentIndex: -1,
            rowIndex: 1,
            disabledValues:[]
        }
    },
    components: {
        // ElSelectTree
    },
    props: {
        editorForm: {
            default:{tagIds:[],tagIdsString:[]}
        },
    },
    created() {
        this.$eventBus.$on('initBasicData', this.initBasicData);
    },
    beforeDestroy() {
        this.$eventBus.$off('initBasicData');
    },
    methods:{
        // 加载终端分组列表
        async loadTreeData() {
            let params = { 'parentId': 0 }
            const res = await deviceApis.loadTree(params)
            if(res){
                this.treeData = res.map(v => {
                    v.disabled = true
                    this.disabledValues.push(v.id)
                    return v
                })
              console.log(this.treeData,'treeData....')
            }

        },
        // 终端节点点击事件
        nodeClick(data, node, obj) {
            if(data) {
                this.valueId = data.id
                this.$set(this.editorForm, 'groupId', this.valueId)
            } else {
                this.valueId = ''
                this.$delete(this.editorForm, 'groupId')
            }
        },
        // treeSelectClick(data)
        // {
        //     console.log(this.treeData)
        //     this.editorForm.groupId = data
        // },
        // 加载省份
        loadProvince() {
            this.$store.dispatch('common/doLoadProvince', {}).then((res) => {
                this.provinceArray = res
            })
        },
        // 加载城市
        changeCity(pid) {
            this.$set(this.editorForm, 'cityId', '')
            this.loadCity(pid)
        },
        loadCity(pid) {
            this.cityArray = []
            const params = {provinceId: '11'}
            if(pid) {
                params.provinceId = pid
            }
            this.$store.dispatch('common/doLoadCity', params).then((res) => {
                this.cityArray = res
            })
        },
        selectChange(){
            this.editorForm.tagIds = this.editorForm.tagIdsString
        },
        initBasicData(){
            this.$nextTick(() => {
                this.loadProvince()
                this.loadTreeData()

                if(this.editorForm) {
                    if(this.editorForm.provinceId) this.loadCity(this.editorForm.provinceId)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.basic-set {
    ::v-deep .el-form-item__content {
        width: 240px;
    }
    ::v-deep .el-select {
        width: 240px;
    }
    ::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 240px;
    }
    ::v-deep .el-select-tree {
        width: 240px;
    }
}
</style>
